<template>
	<div class="login">
		<div class="page-box">
			<div class="login-box">
				<div class="left">
					<div class="title">唐山市共享制造公共服务平台</div>
					<div class="version">v2.0.0</div>
					<div class="subtitle">管理端</div>
				</div>
				<div class="right">
					<div class="color-box-top"></div>
					<div class="input-group">
						<div class="welcome-text">欢迎使用</div>
						<div class="select-box">
							<el-select v-model="dataForm.type" placeholder="请选择" size="small">
								<el-option v-for="item in typeLoginList" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="input-box">
							<el-form :model="dataForm" size="small" :rules="rules" ref="dataForm" label-width="100px"
								class="demo-ruleForm" label-position="top">
								<el-form-item prop="username">
									<el-input placeholder="请输入用户名" v-model="dataForm.username"
										prefix-icon="el-icon-user-solid" clearable></el-input>
								</el-form-item>
								<el-form-item prop="password">
									<el-input placeholder="请输入密码" type="password" v-model="dataForm.password"
										prefix-icon="el-icon-warning" clearable></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" size="small" style="width: 100%;"
										@click="submitForm">登录</el-button>
								</el-form-item>
							</el-form>
						</div>
						<div class="agreement-box">
							<!-- <input type="checkbox" class="checkbox" style="margin-right: 10px;"> -->
							<el-checkbox v-model="checked" style="margin-right: 10px;"></el-checkbox>
							<span class="text hui">登录即代表同意</span>
							<span class="text blue" @click="lookInfo(3)">《平台介绍》</span>
							<span class="text hui">、</span>
							<span class="text blue" @click="lookInfo(2)">《隐私协议》</span>
							<span class="text hui">、</span>
							<span class="text blue" @click="lookInfo(1)">《用户协议》</span>
						</div>
					</div>
					<div class="register-btn-box">
						<div class="register-btn" @click="zhuce">企业申请</div>
					</div>
					<div class="color-box-bottom"></div>
				</div>
			</div>
		</div>
		<el-dialog :title="type==1?'用户协议':type==2?'隐私条款':type==3?'平台介绍':''" :visible.sync="dialogVisible" width="640px">
			<div style="max-height: 500px;overflow-y: auto;">
				<div v-if="type==1" v-html="dataForm1.agree"></div>
				<div v-if="type==2" v-html="dataForm1.privacy"></div>
				<div v-if="type==3" v-html="dataForm1.content"></div>

			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible=false" size="small">取 消</el-button>
			</span>
		</el-dialog>
		<register v-if="dialogVisible_zhuce" ref="register"></register>
		<qiye v-if="dialogVisible_qiye" ref="qiye"></qiye>
	</div>
</template>

<script>
	import {
		setToken
	} from '@/utils/auth'
	import register from './register.vue'
	import qiye from './dialog_qy.vue'
	export default {
		data() {
			//手机号格式校验
			var validatorPhone = function(rule, value, callback) {
				if (value) {
					if (!/^1\d{10}$/.test(value)) {
						callback(new Error('手机号格式错误'))
					} else {
						callback()
					}
				}
				callback();
			};
			return {
				dialogVisible_zhuce: false,
				dialogVisible_qiye:false,
				dialogVisible: false,
				typeLoginList: [{
					label: '运营端登录',
					value: 1
				}, {
					label: '管理端登录',
					value: 2
				}, {
					label: '工厂登录',
					value: 3
				}, {
					label: '企业登录',
					value: 4
				}],
				dataForm: {
					username: '',
					password: '',
					type: 1
				},
				rules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: ["blur", "change"]
						},
						// {
						// 	validator: validatorPhone,
						// 	trigger: ["blur", "change"]
						// },
					],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ["blur", "change"]
					}]
				},
				checked: false,
				dataForm1: {
					agree: '', //用户协议
					privacy: '', //隐私条款
					content: '',
				},
				type: null,
			}
		},
		components: {
			register,
			qiye
		},
		methods: {
			zhuce() {
				this.dialogVisible_zhuce = true
				this.$nextTick(() => {
					this.$refs.register.init()
				})
			},
			qiye(){
				this.dialogVisible_qiye = true
				this.$nextTick(() => {
					this.$refs.qiye.init()
				})
			},
			submitForm() {
				// console.log(this.$http.)
				// this.$router.push('/')
				this.$refs['dataForm'].validate((valid) => {
					if (!this.checked) {
						return this.$message.error("请先勾选同意本平台相关的协议！")
					}
					if (valid) {
						this.$loading()
						this.$http.post('/api/login/login', this.dataForm).then(res => {
							if (res.result) {
								this.$closeLoading()
								setToken(res.result)
								this.$store.commit('userLogin', this.dataForm.type)
								if (this.dataForm.type == 3) {
									this.$router.replace('/process')
								} else if (this.dataForm.type == 4) {
									this.qiye()
									// this.$router.replace('/company/info')
								} else {
									this.$router.replace('/')
								}

							} else {
								this.$closeLoading()
								return this.$message.error("登录失败！")
							}
						})
					} else {
						return false;
					}
				});
			},
			getInfo() {
				this.$loading()
				this.$http.post('/api/publics/sysset', {}).then(res => {
					this.$closeLoading()
					this.dataForm1 = {
						...this.dataForm1,
						...res.result
					}
					localStorage.setItem('userSetInfo', JSON.stringify(res.result))
				})
			},
			lookInfo(e) {
				this.dialogVisible = true
				this.type = e
			},
		},
		created() {
			this.getInfo()
		}
	}
</script>

<style scoped lang="scss">
	.login {
		width: 100%;
		height: 100%;
		background-color: lightskyblue;
		position: relative;

		.page-box {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 98;

			.login-box {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				border-radius: 5px;
				width: 800px;
				height: 500px;
				margin-right: 100px;
				overflow: hidden;

				.left {
					width: 430px;
					height: 500px;
					background-color: hsla(0, 0%, 100%, .2);
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.title {
						width: 350px;
						font-size: 40px;
						margin-top: 10px;
						color: #fff;
						text-align: center;
						line-height: 55px;
					}

					.version {
						font-size: 14px;
						color: #fff;
					}

					.subtitle {
						color: #fff;
						font-size: 20px;
						margin-top: 100px;
					}
				}

				.right {
					width: 370px;
					height: 500px;
					background-color: #fff;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;
					justify-content: space-between;
				}

				.color-box-top {
					width: 370px;
					height: 100px;
					background-image: linear-gradient(180deg, #a6d2ff, #fff);
				}

				.color-box-bottom {
					width: 370px;
					height: 100px;
					background-image: linear-gradient(0deg, #a6d2ff, #fff);
				}

				.select-box {
					width: 300px;
					margin-bottom: 20px;
					display: flex;
				}

				.input-group {
					.welcome-text {
						color: #1d2129;
						margin-bottom: 20px;
						font-size: 20px;
					}

					.input-box {
						width: 300px;
					}

					.agreement-box {
						width: 300px;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						flex-wrap: wrap;

						.text {
							font-size: 12px;
							font-family: "微软雅黑";
						}

						.hui {
							color: #999;
						}

						.blue {
							color: #409eff;
							cursor: pointer;
						}
					}

				}

				.register-btn-box {
					width: 300px;
					height: 50px;
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;

					.register-btn {
						font-size: 12px;
						color: #409eff;
						padding: 2px 5px;
						border: 1px solid #409eff;
						cursor: pointer;
						font-family: "微软雅黑";
					}
				}
			}
		}
	}
</style>